<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>订货宝 让生意更美好！</title>
	<script src="../../static/js/vue.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="../../static/css/element.css">
	<link rel="stylesheet" href="../../static/css/global.css" />
	<link rel="stylesheet" href="../../static/css/main.css" />
	<link rel="stylesheet" href="../../static/css/myelement.css" />
	<!-- 引入组件库 -->
	<script src="../../static/js/element.js"></script>
	<script src="../../static/js/jquery.min.js"></script>
</head>
<body>
	
	<div id="app">
		<div class="main-content">
			<!-- 页面头部 -->
			<div class="page-header">
				<h1 class="page-title">查看页面</h1>
				<div class="breadcrumb"><a href="##">首页</a><span>/</span>入库单</div>
			</div><!-- 页面头部 end -->
			<div class="main-content-body">
				<!-- 订单头部 -->
				<div class="order-header">
					<div class="order-slide">
						<p class="order-desc">订单号：RK.20171205.0002</p>
						<h1 class="order-state">已接单-待支付</h1>
						<div class="order-btn">
							<el-button>打 印</el-button>
							<el-button type="primary">接 单</el-button>
							<el-button type="text">取 消</el-button>
						</div>
					</div>
					<div class="order-main">
						<div class="order_line">
							<span class="items active">
								<p>已下单</p>
								<s></s>
								<label>2017-12-05 15:07</label>
							</span>
							<span class="items active">
								<p>待接单</p>
								<s></s>
								<label>2017-12-05 15:07</label>
							</span>
							<span class="items">
								<p>待完成</p>
								<s></s>
							</span>
						</div>
					</div>
				</div><!-- 订单头部 end -->
				<!-- 配送、订单信息 -->
				<el-row>
					<el-col :span="12">
						<div class="view-title"><h2 class="title_h">配送信息</h2></div>
						<ul class="order-infolt">
							<li>收货地址：张三 13100541321 湖北省武汉市江夏区光谷大道金融港B18栋</li>
							<li>就餐人数：5人</li>
							<li>订单备注：不要辣</li>
						</ul>
					</el-col>
					<el-col :span="12">
						<div class="view-title"><h2 class="title_h">订单信息</h2></div>
						<ul class="order-infolt">
							<li>
								订单编号：<span id="copytext">RK.20171205.0002</span>
								<span class='ml_10 mr_10'>|</span>
                				<span class='fz_c' @click="copyUrl">复制</span>
							</li>
							<li>支付方式：支付宝</li>
							<li>下单时间：2018-09-12 18:12:45</li>
							<li>会员名称：张三</li>
						</ul>
					</el-col>
				</el-row>
				
				<!--主体表格-->
				<div class="view-title"><h2 class="title_h">商品明细</h2></div>
				<div class="z-tables">
					<div class="el-table">
						<table class="el-table__header order-table" cellpadding="0" cellspacing="0" border="0" style="width:100%">
							<thead>
								<tr>
									<th class="is-leaf z-opt_btn" width="45%"><div class="cell">商品详情</div></th>
									<th class="is-leaf z-opt_btn" width="10%"><div class="cell">数量</div></th>
									<th class="is-leaf z-opt_btn" width="15%"><div class="cell">单价</div></th>
									<th class="is-leaf z-opt_btn" width="15%"><div class="cell">金额</div></th>
									<th class="is-leaf z-opt_btn" width="15%"><div class="cell">商品状态</div></th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>
										<ul class="order-product-list">
											<li>
												<div class="pic"><img src="../../static/img/erweima.png"></div>
												<div class="info">
													<div class="name">
														<h3>金融港家乡炒菜馆金牌番茄炒蛋</h3>
														<p class="desc">
															<label>微辣</label>
														</p>
														<p class="sales">菜品券：-￥10.00</p>
													</div>
												</div>
											</li>
										</ul>
									</td>
									<td>
										2
									</td>
									<td>
										￥27
									</td>
									<td>
										<p class="fc_red f_14"><strong>￥27</strong></p>
									</td>
									<td>
										已上菜
									</td>
								</tr>
								<tr>
									<td>
										<ul class="order-product-list">
											<li>
												<div class="pic"><img src="../../static/img/erweima.png"></div>
												<div class="info">
													<div class="name">
														<h3>金融港家乡炒菜馆金牌番茄炒蛋</h3>
														<p class="desc">
															<label>微辣</label>
														</p>
														<p class="sales">菜品券：-￥10.00</p>
													</div>
												</div>
											</li>
										</ul>
									</td>
									<td>
										2
									</td>
									<td>
										￥27
									</td>
									<td>
										<p class="fc_red f_14"><strong>￥27</strong></p>
									</td>
									<td>
										<p class="fz_c">烹饪中</p>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class="order-totle">
					<p>餐具费：<span>￥10.00</span></p>
					<p>包装费：<span>￥2.00</span></p>
					<p>下单立减优惠：<span class="fz_c">-￥10.00</span></p>
					<p>优惠券抵扣：<span class="fz_c">-￥5.00</span></p>
					<div class='totle_price'>
						合计：<strong class="fc_red">￥12110.00</strong>
					</div>
				</div>
				
				<div class="view-title"><h2 class="title_h">操作日志</h2></div>
				<el-table :data="table_log" style="width: 100%;" class="table-log">
					<el-table-column prop="time" label="操作时间" min-width="130"></el-table-column>
					
					<el-table-column prop="name" label="操作人员" min-width="110"></el-table-column> 
					
					<el-table-column prop="type" label="操作类型" min-width="130"> </el-table-column>
					
					<el-table-column prop="log" label="操作日志" min-width="140"> </el-table-column>
				</el-table>

				<div class="edit-button-fixed">
					<div class="edit-button">
						<el-button type="primary">返回</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>

<script th:inline="javascript">
	new Vue({
        el: "#app",
        data: {
            table_log: [
                {
                    time: "2017-09-20 18:30:23",
                    name: "张三",
                    type: "入库审核",
                    log: "入库审核为已通过"
                },
                {
                    time: "2017-09-20 18:30:23",
                    name: "张三",
                    type: "入库审核",
                    log: "入库审核为已通过"
                }
            ]
        },
		methods: {
			copyUrl: function() {
				var box = document.getElementById("copytext");
				var selection = window.getSelection();
				var range = document.createRange();//创建一个选区
				range.selectNodeContents(box);
				selection.removeAllRanges();
				selection.addRange(range);//把当前div添加到选区,此时div会变蓝（选中状态）
				document.execCommand("copy");//这一步之后，div的innerHTML就放到剪贴板里面了，就可以粘贴了，不止可以在浏览器粘贴，在任何地方都可以。此方法的参数有好多种情况，可问度娘
				selection.removeAllRanges();//取消div的选中状态，免得看着那个地方蓝蓝的不好看
				this.$message({
					message: '恭喜你，复制成功',
					type: 'success'
				});
			},
		}
    });
</script>
</body>
</html>